<template>
  <div
    class="pageContain"
    style="color: black; width: 100%; background: #efefef; overflow: hidden"
  >
    <div class="pageContainBack">
      <div class="divFlex">
        <div class="allTop">
          <div class="allTopOne">
            <div class="allTopName">碳排放因子</div>
            <el-table
              :data="dataList"
              style="height: auto; width: 95%; margin: auto; margin-top: 2vh"
              max-height="43vh"
              :header-row-style="{
                height: '6vh',
                fontSize: '1vw',
                color: 'white',
                background: '#005EBC',
              }"
              :row-style="{
                height: '7vh',
                fontSize: '1vw',
              }"
            >
              <el-table-column
                align="center"
                label="能源类型"
                prop="name"
              ></el-table-column>
              <el-table-column
                align="center"
                label="排放系数"
                prop="emissionFactor"
              ></el-table-column>
              <el-table-column align="center" label="设置">
                <template #default="scope">
                  <div style="color: #0baeef" @click="editT(scope.row.id)">
                    编辑
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="allTopOne" style="margin-top: 2vh">
            <div class="allTopName1">班次</div>
            <el-table
              :data="dataList1"
              style="height: auto; width: 95%; margin: auto; margin-top: 2vh"
              max-height="43vh"
              :header-row-style="{
                height: '6vh',
                fontSize: '1vw',
                color: 'white',
                background: '#005EBC',
              }"
              :row-style="{
                height: '7vh',
                fontSize: '1vw',
              }"
            >
              <el-table-column
                align="center"
                label="班次名称"
                prop="name"
              ></el-table-column>
              <el-table-column
                label="开始时间"
                prop="startTime"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                label="结束时间"
                prop="endTime"
              ></el-table-column>
              <el-table-column label="设置" align="center">
                <template #default="scope">
                  <div style="color: #0baeef" @click="editB(scope.row.id)">
                    编辑
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="allTop">
          <div class="allTopOne specile" style="height: 89vh; width: 100%">
            <div class="allTopName">能源价格</div>
            <div
              style="width: 97.5%; display: flex; margin: auto; margin-top: 1vh"
              class="divBeteewn"
            >
              <div class="addOneButton divCenter" style="" @click="addOneNew()">
                新增 +
              </div>
              <el-select
                v-model="dataYear"
                style="width: 6vw"
                @change="getEnengyPrice()"
              >
                <el-option
                  v-for="item in dataYearList"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>

            <el-table
              :data="priceList"
              style="height: auto; width: 97.5%; margin: auto; margin-top: 2vh"
              :header-row-style="{
                height: '6vh',
                fontSize: '1vw',
                color: 'white',
                background: '#005EBC',
              }"
              :row-style="{
                height: '7vh',
                fontSize: '1vw',
              }"
            >
              <el-table-column
                label="能源类型"
                prop="name"
                align="center"
              ></el-table-column>

              <el-table-column label="设置" align="center">
                <template #default="scope">
                  <div
                    style="color: #0baeef"
                    @click="editE(scope.row.name, scope.row.id)"
                  >
                    编辑
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="dialog" :style="{ display: dialog1 }">
        <div class="dialogInner">
          <div class="dialogInnerText" style="width: 47.5vw">
            <div class="dialogTop divCenter">
              <div class="dialogName">碳排放因子/编辑</div>
              <div class="dialogClose divCenter" @click="close()"></div>
            </div>
            <div class="form" style="width: 80%">
              <div class="inputInner divCenter">
                <div class="deviceName">能源类型</div>
                <el-input v-model="form1.name" disabled></el-input>
              </div>
              <div class="inputInner divCenter">
                <div class="deviceName">排放系数</div>
                <el-input v-model="form1.emissionFactor"></el-input>
              </div>
              <div
                class="dubleButton divCenter"
                style="margin-top: 5vh; padding-bottom: 6vh"
              >
                <div
                  class="cancelButton divCenter"
                  style="background: #d30000"
                  @click="close()"
                >
                  取消
                </div>
                <div class="sureButton divCenter" @click="sureEditT()">
                  确定
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog" :style="{ display: dialog2 }">
        <div class="dialogInner">
          <div class="dialogInnerText" style="width: 47.5vw">
            <div class="dialogTop divCenter">
              <div class="dialogName">班次/编辑</div>
              <div class="dialogClose divCenter" @click="close()"></div>
            </div>
            <div class="form" style="width: 80%">
              <div class="inputInner divCenter">
                <div class="deviceName">班次名称</div>
                <el-input disabled v-model="form1.name" style="width: 31vw" />
              </div>

              <div class="inputInner divCenter">
                <div class="deviceName">班次时间</div>
                <div style="width: 31vw" class="divCenter">
                  <el-config-provider :locale="locale">
                    <el-time-picker
                      v-model="form1.startTime"
                      format="HH:mm"
                      type="hour"
                      value-format="HH:mm"
                      placeholder="选择时间"
                      style="width: 15vw"
                      :picker-options="{
                        selectableRange: '00:00 - 24:00',
                      }"
                    ></el-time-picker>
                  </el-config-provider>
                  <div style="width: 1vw">至</div>
                  <el-config-provider>
                    <el-time-picker
                      v-model="form1.endTime"
                      format="HH:mm"
                      type="hour"
                      value-format="HH:mm"
                      placeholder="选择时间"
                      style="width: 15vw"
                      :picker-options="{
                        selectableRange: '00:00 - 24:00',
                      }"
                    ></el-time-picker>
                  </el-config-provider>
                </div>
              </div>
              <div
                class="dubleButton divCenter"
                style="margin-top: 5vh; padding-bottom: 6vh"
              >
                <div
                  class="cancelButton divCenter"
                  style="background: #d30000"
                  @click="close()"
                >
                  取消
                </div>
                <div class="sureButton divCenter" @click="sureEditB()">
                  确定
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog" :style="{ display: 'none' }">
        <div class="dialogInner">
          <div class="dialogInnerText">
            <div class="dialogTop divBeteewn">
              <div class="dialogName">班次/编辑</div>
              <div class="dialogClose divCenter" @click="close()">X</div>
            </div>

            <el-col style="min-width: 500px">
              <el-form
                :model="form"
                label-width="100"
                style="
                  min-width: 500px;
                  padding: 50px 10px;

                  margin-top: 20px;
                  width: 100%;
                "
              >
                <el-form-item label="能源类型">
                  <el-input v-model="form.name" />
                </el-form-item>

                <el-form-item label="执行时间">
                  <el-date-picker
                    v-model="time1[0]"
                    type="date"
                    placeholder="开始时间"
                  />
                  至
                  <el-date-picker
                    v-model="time1[1]"
                    type="date"
                    placeholder="结束时间"
                  />
                </el-form-item>

                <el-form-item label="时间段">
                  <el-time-picker
                    v-model="startTime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    placeholder="选择时间"
                  ></el-time-picker>
                  至
                  <el-time-picker
                    v-model="endTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="选择时间"
                  />
                </el-form-item>
                <div class="dubleButton divFlexEnd" style="margin-top: 50px">
                  <div class="cancelButton divCenter" @click="close()">
                    取消
                  </div>
                  <div class="sureButton divCenter">确定</div>
                </div>
              </el-form>
            </el-col>
          </div>
        </div>
      </div>
      <div class="dialog" :style="{ display: dialog3 }">
        <div class="dialogInner">
          <div class="dialogInnerText" style="width: 47.5vw">
            <div class="dialogTop divCenter">
              <div class="dialogName">能源价格/编辑</div>
              <div class="dialogClose divCenter" @click="close()"></div>
            </div>
            <div
              class="form"
              style="width: 90%"
              v-for="(big, maxIndex) in price"
            >
              <div class="inputInner divLeft" style="margin-bottom: 0">
                <div class="deviceName">能源类型</div>
                <el-select
                  v-model="big.name"
                  style="width: 31vw"
                  placeholder="能源类型"
                  :disabled="addOrEdit == '编辑'"
                  @change="changeKeyString()"
                >
                  <el-option
                    v-for="list in addEnengyList"
                    :label="list.name"
                    :value="list.name"
                  ></el-option>
                </el-select>
                <!-- <el-input
                  v-model="big.name"
                  :disabled="addOrEdit == '编辑'"
                  style="width: 31vw"
                ></el-input> -->
              </div>
              <div
                class="inputInner divLeft"
                style="margin-bottom: 0; margin-top: 1vh"
              >
                <div class="deviceName">年份</div>
                <el-input
                  type="number"
                  :disabled="addOrEdit == '编辑'"
                  style="width: 31vw"
                  v-model="big.year"
                ></el-input>
              </div>
              <div class="inputInner divLeft" style="margin-top: 1vh">
                <div class="deviceName">单价</div>
                <el-input
                  type="number"
                  style="width: 31vw"
                  v-model="big.unitPrice"
                ></el-input>
              </div>
              <div class="bigTimeContain">
                <div
                  class="OnebigTime"
                  v-for="(it, middleIndex) in big.dateRangeList"
                >
                  <div class="inputInner divLeft" style="margin-top: 1vh">
                    <div class="deviceName">执行时间</div>
                    <el-config-provider :locale="locale">
                      <el-date-picker
                        style="width: 15vw"
                        v-model="it.startDate"
                      >
                      </el-date-picker>
                    </el-config-provider>
                    <el-config-provider :locale="locale">
                      <el-date-picker
                        style="width: 15vw; margin-left: 1vw"
                        v-model="it.endDate"
                      >
                      </el-date-picker>
                    </el-config-provider>
                  </div>
                  <div class="smallTimeContain" v-if="!isGas">
                    <div
                      class="inputInner divLeft"
                      v-for="(item, index) in it.timeRangeList"
                    >
                      <div class="deviceName">时间段{{ index + 1 }}</div>
                      <div style="width: 25vw">
                        <el-config-provider :locale="locale">
                          <el-time-picker
                            placeholder="开始时间"
                            format="HH:mm"
                            v-model="item.startTime"
                            value-format="HH:mm"
                            style="width: 11vw !important"
                            :picker-options="{
                              selectableRange: '00:00:00 - 24:00:00',
                            }"
                          />至
                          <el-time-picker
                            placeholder="结束时间"
                            format="HH:mm"
                            v-model="item.endTime"
                            value-format="HH:mm"
                            style="width: 11vw !important"
                            :picker-options="{
                              selectableRange: '00:00:00 - 24:00:00',
                            }"
                          />
                        </el-config-provider>
                      </div>
                      <div
                        class="deleteTime divCenter"
                        @click="removeOneTime(maxIndex, middleIndex, index)"
                      >
                        —
                      </div>
                      <div
                        v-if="index == it.timeRangeList.length - 1"
                        class="deleteTime divCenter"
                        style="background: #26c400"
                        @click="addOneTime(maxIndex, middleIndex)"
                      >
                        +
                      </div>
                      <div
                        v-else
                        class="deleteTime divCenter"
                        style="background: rgba(0, 0, 0, 0)"
                      ></div>
                    </div>
                  </div>

                  <div
                    class="deleteTime divCenter bigDelete"
                    @click="removeBig(maxIndex, middleIndex)"
                  >
                    —
                  </div>
                </div>
              </div>
              <div class="inputInner divCenter" style="margin-top: 1vh">
                <div
                  class="deleteTime divCenter"
                  style="background: #26c400"
                  @click="addBig(maxIndex)"
                >
                  +
                </div>
              </div>
              <div
                class="dubleButton divCenter"
                style="margin-top: 5vh; padding-bottom: 6vh"
              >
                <div
                  class="cancelButton divCenter"
                  style="background: #d30000"
                  @click="close()"
                >
                  取消
                </div>
                <div class="sureButton divCenter" @click="sureAddEnengyPrice()">
                  确定
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog" :style="{ display: 'none' }">
        <div class="dialogInner">
          <div class="dialogInnerText">
            <div class="dialogTop divBeteewn">
              <div class="dialogName">{{ addOrEdit }}设备</div>
              <div class="dialogClose divCenter" @click="close()">X</div>
            </div>
            <div class="dialogTips divCenter">
              确定要删除 &nbsp{{ this.form.deviceName }} &nbsp吗？
            </div>
            <div class="dubleButton divCenter">
              <div class="cancelButton divCenter" @click="close()">取消</div>
              <div
                class="sureButton divCenter"
                style="background: red"
                @click="sureDelete"
              >
                确定
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";
import service from "@/api/api";
import zhCn from "element-plus/es/locale/lang/zh-cn";
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    sendMessage(5, "全局设置");
    next();
  },
  data() {
    return {
      select: null,
      locale: zhCn,
      selectedTime1: "",
      selectedTime2: "",
      dataYearList: [],
      dataYear: null,
      tanName: "",
      dialog1: "none",
      dialog2: "none",
      dialog3: "none",
      addOrEdit: "",
      addEnengyList: [
        { name: "电能-尖" },
        { name: "电能-峰" },
        { name: "电能-平" },
        { name: "电能-谷" },
        { name: "电能-深谷" },
        { name: "燃气" },
      ],
      dataList: [
        {
          type: "电能",
          xishu: "XXXX",
          id: 1,
        },
        {
          type: "燃气",
          xishu: "XXXX",
          id: 1,
        },
      ],
      dataList1: [
        {
          type: "白班",
          startTime: "08:00",
          endTime: "20:00",
        },
        {
          type: "夜班",
          startTime: "20:00",
          endTime: "08:00",
        },
      ],

      form1: {
        configType: "",
        emissionFactor: null,
        endTime: null,
        energyType: "",
        id: "",
        isEnabled: true,
        name: "",
        startTime: "",
        unit: "",
      },

      tableWidth: "",
      form: {
        deviceName: "",
        electId: "",
        type: "",
        place: "",
        net: "",
        MQTT: false,
        state: "",
      },
      id: null,
      startTime: "",
      endTime: "",
      time1: [],
      timeRange: [],
      timeList: [{ time: "" }],
      dateTime1: "",
      dateTime2: "",
      priceList: [],
      isGas: false,
      price: [
        {
          id: null,
          keyStr: "",
          name: "",
          year: null,
          unitPrice: null,
          dateRangeList: [
            {
              startDate: "",
              endDate: "",
              timeRangeList: [
                {
                  startTime: "",
                  endTime: "",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: [],

  methods: {
    // 获取年份下拉数据
    changeKeyString() {
      console.log(this.price[0].name);
      if (this.price[0].name == "电能-尖") {
        this.price[0].keyStr = "ELE_PEAK";
      } else if (this.price[0].name == "电能-峰") {
        this.price[0].keyStr = "ELE_HIGH";
      } else if (this.price[0].name == "电能-平") {
        this.price[0].keyStr = "ELE_HIGH";
      } else if (this.price[0].name == "电能-谷") {
        this.price[0].keyStr = "ELE_VALLEY";
      } else if (this.price[0].name == "电能-深谷") {
        this.price[0].keyStr = "ELE_DEEP_VALLEY";
      }
    },
    addOneNew() {
      this.price = [
        {
          id: null,
          keyStr: "",
          name: "",
          year: null,
          unitPrice: null,
          dateRangeList: [
            {
              startDate: "",
              endDate: "",
              timeRangeList: [
                {
                  startTime: "",
                  endTime: "",
                },
              ],
            },
          ],
        },
      ];
      this.dialog3 = "block";
      this.addOrEdit = "新增";
    },
    async getYearData() {
      let res = await service({
        method: "get",
        url: "/energy-price/year-list",
      });
      // console.log(res);
      this.dataYearList = res.data;
    },
    // 查询能源价格
    getEnengyPrice() {
      service({
        method: "get",
        url: "/energy-price/find-all",
        params: {
          year: this.dataYear,
        },
      }).then((e) => {
        this.priceList = e.data;
      });
    },
    sureAddEnengyPrice() {
      let data = this.price[0];
      if (this.addOrEdit == "编辑") {
        service({
          method: "PUT",
          url: "/energy-price",
          data: data,
        })
          .then((e) => {
            if (e.status == "SUCCESS") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
            this.close();
            this.getEnengyPrice();
          })
          .catch((err) => {
            this.$message({
              message: "修改失败",
              type: "warning",
            });
          });
      } else if (this.addOrEdit == "新增") {
        let data = this.price[0];
        service({
          method: "POST",
          url: "/energy-price",
          data: data,
        })
          .then((e) => {
            if (e.status == "SUCCESS") {
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }
            this.close();
            this.getEnengyPrice();
          })
          .catch((err) => {
            this.$message({
              message: "修改失败",
              type: "warning",
            });
          });
      }
    },
    addOneTime(max, middle) {
      // this.timeList.push({ time: "" });
      // console.log(this.timeList);
      this.price[max].dateRangeList[middle].timeRangeList.push({
        startTime: "",
        endTime: "",
      });
    },
    removeOneTime(max, middle, index) {
      if (this.price[max].dateRangeList[middle].timeRangeList.length == 1) {
        return this.$message({
          message: "一段时间内至少有一个每日时间区间",
        });
      }
      this.price[max].dateRangeList[middle].timeRangeList.splice(index, 1);
    },
    removeBig(big, middle) {
      if (this.price[big].dateRangeList[middle].length == 1) {
        return this.$message({
          message: "一个电价类型中至少存在一个时间段",
        });
      }
      this.price[big].dateRangeList.splice(middle, 1);
    },
    addBig(a) {
      this.price[a].dateRangeList.push({
        startDate: "",
        endDate: "",
        timeRangeList: [
          {
            startTime: "",
            endTime: "",
          },
        ],
        unitPrice: null,
      });
    },
    formatTimeToHHMMSS(timeStr) {
      // 1. 基础格式验证（允许 HH:MM 或 HH:MM:SS）
      const timeRegex = /^([01]?\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/;

      if (!timeRegex.test(timeStr)) {
        throw new Error("无效的时间格式，请输入 HH:MM 或 HH:MM:SS");
      }

      // 2. 补全秒位（如果缺少 :SS 部分）
      if (timeStr.split(":").length === 2) {
        return timeStr + ":00";
      }

      // 3. 已经是完整格式则直接返回
      return timeStr;
    },
    async getWork() {
      let res = await service({
        method: "get",
        url: "/emission-shift/config-type/shift",
      });

      this.dataList1 = res.data;
    },
    async getNeneger() {
      let res = await service({
        method: "get",
        url: "/emission-shift/config-type/emission",
      });

      this.dataList = res.data;
    },
    editT(a) {
      this.dataList.forEach((item) => {
        if (item.id == a) {
          this.form1.configType = item.configType;
          this.form1.emissionFactor = item.emissionFactor;
          this.form1.energyType = item.energyType;
          this.form1.endTime = item.endTime;
          this.form1.id = item.id;
          this.form1.isEnabled = item.isEnabled;
          this.form1.name = item.name;
          this.form1.startTime = item.startTime;
          this.form1.unit = item.unit;
          console.log(this.form1);
        }
      });
      this.dialog1 = "block";
    },

    async sureEditT() {
      let res = await service({
        method: "put",
        url: "/emission-shift",
        data: this.form1,
      });
      try {
        if (res.status == "SUCCESS") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.close();
          this.getNeneger();
        } else {
          this.$message({
            message: "修改失败",
            type: "warning",
          });
          this.close();
          this.getNeneger();
        }
      } catch (error) {
        this.$message({
          message: "修改失败",
          type: "warning",
        });
        this.close();
        this.getNeneger();
      }
    },
    async sureEditB() {
      console.log(this.form1);
      this.form1.endTime = this.formatTimeToHHMMSS(this.form1.endTime);
      this.form1.startTime = this.formatTimeToHHMMSS(this.form1.startTime);

      let res = await service({
        method: "put",
        url: "/emission-shift",
        data: this.form1,
      });
      try {
        if (res.status == "SUCCESS") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.close();
          this.getWork();
        } else {
          this.$message({
            message: "修改失败",
            type: "warning",
          });
          this.close();
          this.getWork();
        }
      } catch (error) {
        this.$message({
          message: "修改失败",
          type: "warning",
        });
        this.close();
        this.getWork();
      }
    },

    editB(a) {
      this.dialog2 = "block";
      this.dataList1.forEach((item) => {
        console.log(item);
        if (item.id == a) {
          this.form1.configType = item.configType;
          this.form1.emissionFactor = item.emissionFactor;
          this.form1.endTime = item.endTime;
          this.form1.id = item.id;
          this.form1.isEnabled = item.isEnabled;
          this.form1.name = item.name;
          this.form1.startTime = item.startTime;
          this.form1.unit = item.unit;
          this.form1.energyType = item.energyType;
        }
      });
    },
    editE(a, b) {
      this.addOrEdit = "编辑";
      this.priceList.forEach((item) => {
        if (item.id == b) {
          if (item.keyStr == "GAS") {
            this.isGas = true;
          }
          this.price = [];
          this.price.push(item);
          this.dialog3 = "block";
        }
      });
    },
    close() {
      this.dialog1 = "none";
      this.dialog2 = "none";
      this.dialog3 = "none";
      this.isGas = false;
      this.addOrEdit = "";
      this.price = [];
      this.form1 = {
        configType: "",
        emissionFactor: null,
        endTime: null,
        energyType: "",
        id: "",
        isEnabled: true,
        name: "",
        startTime: "",
        unit: "",
      };
    },
  },
  created() {
    this.dataYear = new Date().getFullYear();
    this.getYearData();
    this.getEnengyPrice();
    this.getNeneger();
    this.getWork();
  },
  mounted() {},
  beforeUnmount() {},
};
</script>
<style lang="less" scoped>
// 时间选择器
:deep(.el-date-editor.el-input__wrapper) {
  box-shadow: 0 0 0 1px #0281b8 inset;
}
:deep(.el-range-input, ) {
  font-size: 1vw !important;
}
:deep(.el-date-editor .el-range-separator) {
  font-size: 1vw !important;
}
:deep(.el-table__cell) {
  padding: 0 !important;
  // border-bottom: 1px solid red;
}

:deep(.el-input) {
  font-size: 1vw;
  // box-shadow: 0 0 0 1px #0281b8 inset;
  background: #efefef;
  height: 3vh;
}
.el-input {
  height: 3vh;
}

:deep(.el-input__wrapper) {
  height: 3vh;
  background: #efefef !important;
}
.specile {
  :deep(.el-table td.el-table__cell) {
    border-bottom: 1px solid #a4a6a7;
  }
  :deep(.el-table tr:last-child td) {
    border-bottom: none;
  }
}
// .el-time-picker修改

:deep(.el-select__wrapper) {
  height: 3vh !important;
  background: #efefef !important;
  // box-shadow: 0 0 0 1px #0281b8 inset;
}

:deep(.el-select__selected-item) {
  font-size: 1vw;
  height: 3vh;
  display: flex;
  align-items: center;
  // box-shadow: 0 0 0 1px #0281b8 inset;
}

.el-select-dropdown__item {
  height: 3vh !important; /* 修改高度 */
  line-height: 3vh !important; /* 修改行高，保持与高度一致 */
  font-size: 1vw !important; /* 修改字体大小 */
}
.allTop {
  width: 100%;
  // margin: auto;
  height: 45vh;
  margin: auto;
  margin-top: 2vh;
  .allTopOne {
    width: 98%;
    height: 43.5vh;
    background: white;
    .allTopName {
      width: 9.6vw;
      line-height: 6vh;
      background: url(@/assets/img/allSet.png);
      background-size: 100% 100%;
      text-indent: 1em;
      color: white;
      font-size: 1.2vw;
      font-weight: 600;
      font-family: smallMenu;
    }
    .allTopName1 {
      width: 5.9vw;
      line-height: 6vh;
      background: url(@/assets/img/allSet1.png);
      background-size: 100% 100%;
      color: white;
      font-size: 1.2vw;
      font-weight: 600;
      text-indent: 1em;
    }
  }
}
.form {
  width: 100%;
  // height: 60vh;
  margin: auto;
  margin-top: 3vh;
  background: white;

  .inputInner {
    width: 100%;
    margin-bottom: 1vh;
    .deviceName {
      font-size: 1.2vw;
      font-weight: 400;
      width: 6.5vw;
      text-align: center;
      color: black;
    }
  }
}
.deleteTime {
  width: 1.5vw;
  height: 1.5vw;
  background: red;
  border-radius: 50%;
  font-size: 0.7vw;
  margin-left: 0.5vw;
  color: white;
}
.OnebigTime {
  position: relative;
  padding: 0.2vw 0;
  border: 1px solid #0281b8;
  margin-top: 1vh;
  border-radius: 1vw;
}
.bigDelete {
  position: absolute;
  right: 3vw;
  top: 50%;
}
.smallTimeContain {
  height: auto;
  max-height: 10vh;
  overflow-y: auto;
}
.smallTimeContain {
  overflow: auto;
  width: calc(100% + 6px); /* 增加宽度补偿滚动条 */
  padding-right: 6px; /* 补偿滚动条空间 */
  margin-right: -6px; /* 负边距抵消滚动条 */
}
.smallTimeContain::-webkit-scrollbar {
  width: 5px;
}

.smallTimeContain::-webkit-scrollbar-thumb {
  background: #efefef;
}

.bigTimeContain {
  width: 100%;
  height: auto;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.bigTimeContain::-webkit-scrollbar {
  width: 5px;
}

.bigTimeContain::-webkit-scrollbar-thumb {
  background: #efefef;
}
</style>
